'use client'

import Login from '@/components/Login'
import { navs } from '@/config/navbar'
import { Button } from 'antd'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useState } from 'react'
import styles from './index.module.scss'

export default function Navbar() {
  const pathname = usePathname()
  const [isShowLogin, setIsShowLogin] = useState(false)

  const handleGotoEditorPage = () => {}
  const handleLogin = () => {
    setIsShowLogin(true)
  }
  const handleClose = () => {
    setIsShowLogin(false)
  }

  return (
    <div className={styles.navbar}>
      <section className={styles.logoArea}>BLOG-C</section>
      <section className={styles.linkArea}>
        {navs?.map((ele) => (
          <Link
            key={ele.label}
            href={ele.value}
            className={pathname === ele.value ? styles.active : ''}
          >
            {ele.label}
          </Link>
        ))}
      </section>
      <section className={styles.operationArea}>
        <Button onClick={handleGotoEditorPage}>写文章</Button>
        <Button type='primary' onClick={handleLogin}>
          登录
        </Button>
      </section>
      <Login isShow={isShowLogin} onClose={handleClose} />
    </div>
  )
}
